import { Button, Modal, Form, Input, Switch, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { addEmpl } from "../../../../api/authority"
import '../css/Authority.less'
interface PropsType {
    isAdd: boolean
    closeAdd(): void
    roleNamesList: string[]
    showRoles():void
}
function AddManagement(props: PropsType) {

    const [form] = Form.useForm();

    // 3、点击取消
    const cancel = () => {
        props.closeAdd()
        form.resetFields();
    }

    // 表单布局
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 表单验证
    const validateMessages = {
        required: '${label}必填',
        types: {
            number: '${label}必须是数值',
        },
        number: {
            range: '${label}  ${min} 到 ${max} 位',
        },
    };


    const onFinish = (values: any) => {
        props.closeAdd()
        console.log('Success:', values);
        form.resetFields();
        addEmpl({ emplMail: values.eMail, emplName: values.name, emplNote: values.remarks, emplNumber: values.username, emplPhone: values.phone, emplPwd: values.password, roleName: values.role }).then(res => {
            console.log('所有信息', res);
            props.showRoles()
        }).catch(err => {
            console.log('所有信息', err);
        })
    }



    return (
        <>
            {/* <Button type="primary" onClick={showModal}>
        Open Modal
      </Button> */}
            <Modal centered={true} title="添加角色" open={props.isAdd} footer={null} onCancel={cancel}>
                <Form
                    name="basic"
                    form={form}
                    {...layout}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}

                    autoComplete="off"
                >
                    <Form.Item
                        label="成员账号"
                        name="username"
                        rules={[{ required: true, message: '（建议使用邮箱或手机号作为成员账号）' }]}
                    >
                        <Input placeholder='此为登录使用账号' />
                    </Form.Item>

                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[{ required: true, }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="邮箱"
                        name="eMail"
                        rules={[{ required: true, }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true }]}
                    >
                        <Select
                            style={{ width: 120 }}

                            placeholder="请选择角色"
                            options={props.roleNamesList.map(item => ({
                                value: item,
                                label: item,
                            }))}
                        />
                    </Form.Item>
                    <Form.Item
                        label="登录密码"
                        name="password"
                        hasFeedback
                        rules={[{ required: true, message: '（不少于6位，数字、字母或下划线）' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="twoPassword"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                              required: true,
                              message: '两次密码输入不同',
                            },
                            ({ getFieldValue }) => ({
                              validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                  return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次密码输入不同'));
                              },
                            }),
                          ]}
                    >
                         <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="备注信息"
                        name="remarks"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            ...layout.wrapperCol,
                            offset: 8,
                        }}
                    >
                        <Button type="primary" htmlType="submit" className='yes'>确定</Button>
                        <Button type="primary" onClick={cancel} ghost>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default AddManagement;